<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="description" content="A Guides component that can draw ruler and manage guidelines." />
    <meta property="og:title" content="A Guides component that can draw ruler and manage guidelines.">
    <meta property="og:url" content="https://daybrush.com/guides">
    <meta property="og:image" content="https://daybrush.com/guides/images/guides1920x1080.png">
    <meta property="og:description" content="A Guides component that can draw ruler and manage guidelines.">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="A Guides component that can draw ruler and manage guidelines.">
    <meta name="twitter:url" content="https://daybrush.com/guides">
    <meta name="twitter:image" content="https://daybrush.com/guides/images/guides1920x1080.png">
    <meta name="twitter:description" content="A Guides component that can draw ruler and manage guidelines.">
    <meta name="theme-color" content="#f5f5f5">
    <title>A Guides component that can draw ruler and manage guidelines.</title>
    <link rel="stylesheet" type="text/css" href="./dist/index.css" />
</head>

<body>
    <div class="box"></div>
    <div class="ruler horizontal">

    </div>
    <div class="ruler vertical">

    </div>

    <div class="container">
        <img src="https://daybrush.com/guides/images/guides.png" width="200" alt="guides" />
        <p class="dragit">Drag Screen & Rulers!</p>
        <p class="badges">
            <a href="https://www.npmjs.com/package/@scena/guides" target="_blank">
                <img src="https://img.shields.io/npm/v/@scena/guides.svg?style=flat-square&color=007acc&label=version"
                    alt="npm version" /></a>
            <a href="https://github.com/daybrush/guides" target="_blank">
                <img src="https://img.shields.io/github/stars/daybrush/guides.svg?color=42b883&style=flat-square" /></a>
            <a href="https://github.com/daybrush/guides" target="_blank">
                <img src="https://img.shields.io/badge/language-typescript-blue.svg?style=flat-square" />
            </a>
            <a href="https://github.com/daybrush/guides/blob/master/LICENSE" target="_blank">
                <img
                    src="https://img.shields.io/github/license/daybrush/guides.svg?style=flat-square&label=license&color=08CE5D" />
            </a>
            <a href="https://github.com/daybrush/guides/tree/master/packages/react-guides" target="_blank"><img
                    alt="React"
                    src="https://img.shields.io/static/v1.svg?label=&message=React&style=flat-square&color=61daeb"></a>
            <a href="https://github.com/daybrush/guides/tree/master/packages/preact-guides" target="_blank"><img
                    alt="Preact"
                    src="https://img.shields.io/static/v1.svg?label=&message=Preact&style=flat-square&color=673ab8"></a>
            <a href="https://github.com/daybrush/guides/tree/master/packages/ngx-guides" target="_blank"><img
                    alt="Angular"
                    src="https://img.shields.io/static/v1.svg?label=&message=Angular&style=flat-square&color=C82B38"></a>
            <a href="https://github.com/daybrush/guides/tree/master/packages/vue-guides" target="_blank"><img alt="Vue"
                    src="https://img.shields.io/static/v1.svg?label=&message=Vue&style=flat-square&color=3fb984"></a>
            <a href="https://github.com/daybrush/guides/tree/master/packages/svelte-guides" target="_blank"><img
                    alt="Svelte"
                    src="https://img.shields.io/static/v1.svg?label=&message=Svelte&style=flat-square&color=C82B38"></a>
        </p>
        <p class="description">A Guides component that can draw ruler and manage guidelines.</p>
        <div class="buttons">
            <a href="https://github.com/daybrush/guides" target="_blank">Download</a>
            <!-- <a href="./release/latest/doc" target="_blank">API</a> -->
        </div>
    </div>



    <script src="./dist/index.js"></script>
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-128864447-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());
        gtag('config', 'UA-128864447-1');
    </script>
</body>

</html>
